//Clearfix

@mixin clearfix() {
  &:before,
  &:after {
    content: "";
    display: table;
  }
  &:after {
    clear: both;
  }
}

//圆角边框

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

//跨浏览器的透明度设置

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

.faded-text {
  @include opacity(0.8);
}

//文本溢出省略显示

@mixin text-ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//多行文本溢出省略显示 - 支持 WebKit浏览器或移动端的页面

@mixin text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

//使用rem设置字体尺寸并使用像素进行回退
@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

p {
  @include font-size(14px)
}

//Retina 背景图片
@mixin imgRetina($image, $extension, $width, $height, $position: center, $repeat: no-repeat) {
  background: url($image + '.' + $extension) $repeat $position;

  @media screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min--moz-device-pixel-ratio: 2),
  //screen and (-moz-min-device-pixel-ratio: 2),
  screen and (-o-min-device-pixel-ratio: 2/1),
  screen and (min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
    background: url($image + '@2x' + '.' + $extension) $repeat $position;
    background-size: $width $height;
  }
}

.bg-image {
  @include imgRetina(images/waterlily, jpg, 200px, 200px, no-repeat, center);
  height: 200px;
  width: 200px;
}

//inline-block
$inline-block-alignment: middle !default; //设置一个默认的对齐方式
// 提供一个跨浏览器的方法来实现`display:inline-block`
@mixin inline-block($alignment: $inline-block-alignment) {
  display: inline-block;
  @if $alignment and $alignment != none {
    vertical-align: $alignment;
  }
  @if $legacy-support-for-ie {
    *vertical-align: auto;
    zoom: 1;
    *display: inline;
  }
}

//透明度
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie);
}

//绝对定位
@mixin abs-pos($top: auto, $right: auto, $bottom: auto, $left: auto) {
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
  position: absolute;
}

//禁用样式disabled
@mixin disabled($bgColor: #e6e6e6,$textColor:#ababab) {
  background-color: $bgColor !important;
  color: $textColor !important;
  cursor: not-allowed !important;
}

//When-inside
@mixin when-inside($context) {
  #{$context} & {
    @content;
  }
}

//Animations &&  keyframes

//@mixin keyframes($animation-name) {
//  @-webkit-keyframes $animation-name {
//    @content;
//  }
//  @-moz-keyframes $animation-name {
//    @content;
//  }
//  @-ms-keyframes $animation-name {
//    @content;
//  }
//  @-o-keyframes $animation-name {
//    @content;
//  }
//  @keyframes $animation-name {
//    @content;
//  }
//}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};
}

@include keyframes(slide-down) {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}

.box {
  width: 100px;
  height: 100px;
  background: black;
  @include animation('slide-down 5s 3');
}

//Transitions
@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

a {
  color: gray;
  @include transition(color .3s ease);

  &:hover {
    color: black;
  }
}


